import React, {Component} from 'react';
import {Button, Divider, Input, List, Card} from "antd";
import {nanoid} from "nanoid";
import {connect} from 'react-redux'
import {person} from "../../redux/actions/person";

class Person extends Component {

    addPerson = () => {
        let name = this.nameNode.state.value
        let age = this.ageNode.state.value
        console.log(age, name)
        let person = {id: nanoid(), name, age}
        this.props.addPerson(person)
        this.nameNode.state.value = ''
        this.ageNode.state.value = ''
    }

    render() {
        return (
            <div>
                <Card title="信息录入" style={{width: 500}}>
                    <div style={{marginBottom: 16}}>
                        <Input ref={c => this.nameNode = c} placeholder="请输入名字"/>
                    </div>
                    <div style={{marginBottom: 16}}>
                        <Input type="number" ref={c => this.ageNode = c} placeholder="请输入年龄"/>
                    </div>
                    <Button onClick={this.addPerson} type="primary">添加</Button>
                </Card>
                <Divider orientation="left">人员列表</Divider>
                <List
                    size="small"
                    bordered
                    dataSource={this.props.persons}
                    renderItem={item => <List.Item>姓名:{item.name}-年龄:{item.age}</List.Item>}
                />
            </div>
        );
    }
}

//创建并暴露一个Count的容器组件
export default connect(
    state => ({persons: state.ren}),
    // dispatch => ({
    //     //执行redux执行加法
    //     increment: data => dispatch(createIncrementAction(data)),
    //     decrement: data => dispatch(createDecrementAction(data)),
    //     incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
    // }),
    {
        //执行redux执行加法
        addPerson: person
    }
)(Person);